<%--
  Created by IntelliJ IDEA.
  User: JYC
  Date: 2022/4/13
  Time: 17:31:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div class="easyui-layout" style="width: 100%;height: 100%">
    <div data-options="region:'north',split:true" title="按条件查询" style="width:100%; height: 110px">
        <form id="qryBy" method="post" style="margin:0;padding:5px 5px">
            <span style="margin-right:10px">
                <input name="carnumber" class="easyui-textbox" label="车牌号:">
            </span>
            <span style="margin-right:10px">
                <input name="cartype" class="easyui-textbox" label="车辆类型:">
            </span>
            <span style="margin-right:10px">
                <input name="color" class="easyui-textbox" label="车辆颜色:">
            </span>
            <span style="margin-right:10px">
                <input name="price" class="easyui-textbox" label="车辆价格:">
            </span>
            <span style="margin-right:10px">
                <input name="rentprice" class="easyui-textbox" label="车辆租金:">
            </span>
            <span style="margin-right:10px">
                <input name="deposit" class="easyui-textbox" label="车辆押金:">
            </span>
            <span style="margin-right:10px">
                <label>是否已出租：</label>
                <input class="easyui-radiobutton" name="isrenting" value="1" label="是">&emsp;&emsp;&emsp;&emsp;
                <input class="easyui-radiobutton" name="isrenting" value="0" label="否" checked>
            </span>
        </form>
        <div align="center">
            <button onclick="qryBy()" class="easyui-linkbutton">查询</button>
            <button onclick="clearF()" class="easyui-linkbutton">清空</button>
        </div>
    </div>
    <div data-options="region:'center',title:'车辆列表',iconCls:'icon-ok'">
        <table class="easyui-datagrid" toolbar="#toolbar2" pagination="true" rownumbers="true" id="tb_datac"
               striped="true"
               data-options="url:'qryCar',method:'get',singleSelect:true,fit:true,fitColumns:true">
            <thead>
            <tr>
                <th data-options="field:'carnumber'" width="50">车牌号</th>
                <th data-options="field:'cartype'" width="50">车辆类型</th>
                <th data-options="field:'color'" width="50">车辆颜色</th>
                <th data-options="field:'price'" width="50">车辆价格</th>
                <th data-options="field:'rentprice'" width="50">车辆租金</th>
                <th data-options="field:'deposit'" width="50">车辆押金</th>
                <th data-options="field:'isrenting',align:'right',formatter:function(value){return value==1?'是':'否'}"
                    width="30">是否已出租
                </th>
                <th data-options="field:'description'" width="60">车辆描述</th>
                <%--                <th data-options="field:'carimg'" width="60">车辆图片</th>--%>
            </tr>
            </thead>
        </table>
        <div id="toolbar2">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newCar()">新增</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
               onclick="editCar()">修改</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
               onclick="destroyCar()">删除</a>
        </div>
        <div id="dlg" class="easyui-dialog" style="width:800px"
             data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
            <div style="position: absolute;border: red solid 0px;width: 350px;height: 300px;left: 400px;top: 50px">
                <img src="" style="width: 350px;height: 300px;" id="cimg"/>
            </div>
            <form method="post" enctype="multipart/form-data" id="car_img_up" novalidate
                  style="margin: 0;padding: 10px 10px;width: 400px">
                <input class="easyui-filebox" label="车辆图片：" data-options="buttonText:'选择图片...'" style="width: 70%"
                       name="cimg">
                <a href="javascript:void(0)" style="width: 25%" class="easyui-linkbutton" iconCls="icon-add"
                   plain="true"
                   onclick="uploadImg()">上传</a>
            </form>
            <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
                <input type="hidden" name="carimg" value="" id="carimg">
                <div style="margin-bottom:10px">
                    <input name="carnumber" class="easyui-textbox" required="true" label="车牌号:" style="width:40%"
                           id="id22">
                </div>
                <div style="margin-bottom:10px">
                    <input name="cartype" class="easyui-textbox" label="车辆类型:" style="width:40%">
                </div>
                <div style="margin-bottom:10px">
                    <input name="color" class="easyui-textbox" label="车辆颜色:" style="width:40%">
                </div>
                <div style="margin-bottom:10px">
                    <input name="price" class="easyui-textbox" label="车辆价格:" style="width:40%">
                </div>
                <div style="margin-bottom:10px">
                    <input name="rentprice" class="easyui-textbox" label="车辆租金:" style="width:40%">
                </div>
                <div style="margin-bottom:10px">
                    <input name="deposit" class="easyui-textbox" label="车辆押金:" style="width:40%">
                </div>
                <div style="margin-bottom:10px">
                    <label>是否已出租：</label>
                    <input class="easyui-radiobutton" name="isrenting" value="1" label="是">&emsp;&emsp;&emsp;&emsp;
                    <input class="easyui-radiobutton" name="isrenting" value="0" label="否" checked>
                </div>
                <div style="margin-bottom:10px">
                    <input name="description" class="easyui-textbox" label="车辆描述:" style="width:100%">
                </div>
            </form>
        </div>
    </div>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveCar()"
       style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="clearAll()" style="width:90px">关闭</a>
</div>
<script type="text/javascript">
    var url;

    function clearAll() {
        $('#dlg').dialog('close');
        $("#car_img_up").form('clear');
    }

    function qryBy() {
        //将表单序列化为json对象
        var params = $("#qryBy").serializeJson();
        // console.log(params);
        $("#tb_datac").datagrid({
            queryParams: params
        });
    }

    function clearF() {
        $('#qryBy').form('clear');
        $('#car_img_up').form('clear');
    }

    function newCar() {
        $('#id22').textbox('readonly', false);
        $('#dlg').dialog('open').dialog('center').dialog('setTitle', '新增车辆');
        $('#fm').form('clear');
        $('#car_img_up').form('clear');
        $('#cimg').attr('src', '');
        url = 'addCar';
    }

    function editCar() {
        var row = $('#tb_datac').datagrid('getSelected');
        if (row) {
            $('#dlg').dialog('open').dialog('center').dialog('setTitle', '编辑车辆信息');
            $('#fm').form('load', row);
            $('#cimg').attr('src', row.carimg);
            $('#id22').textbox('readonly', true);
            url = 'updCar';
        }
    }

    function saveCar() {
        $('#fm').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                // console.log(result)
                let res = JSON.parse(result);
                // console.log(res)
                if (res.errorMsg) {
                    // console.log("进入异常输出")
                    $.messager.show({
                        title: '错误',
                        msg: res.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#tb_datac').datagrid('reload');    // reload the user data
                    $('#id22').textbox('readonly', false);
                }
            }
        });
    }

    function destroyCar() {
        var row = $('#tb_datac').datagrid('getSelected');
        // console.log(row)
        if (row) {
            $.messager.confirm('确认', '确定要删除该车辆吗？', function (r) {
                if (r) {
                    $.post('delCar', {'identity': row.carnumber}, function (result) {
                        if (result.success) {
                            $('#tb_datac').datagrid('reload');    // reload the user data
                        } else {
                            $.messager.show({    // show error message
                                title: '错误',
                                msg: result.errorMsg
                            });
                        }
                    }, 'json');
                }
            });
        }
    }

    function uploadImg() {
        // console.log($("#car_img_up").val());
        $("#car_img_up").form('submit', {
            url: 'uploadImg',
            success(url) {
                if (url !== 'error') {
                    $("#cimg").attr('src', url);
                    $("#carimg").val(url);
                } else {
                    $.messager.show({    // show error message
                        title: '错误',
                        msg: '上传文件为空'
                    });
                }
            }
        })
    }
</script>
</body>
</html>
